﻿<div id="playoptions-pane" class="tab section">
    <a class="trigger" data-bind="attr: { href: urls.playOptions }" data-info-nav="playoptions">
    </a>
    <div class="content">
        <div class="header">
            Start a game of <b data-bind="text: name">Game Name</b>!</div>
        <p data-bind="text: instructions">
        </p>        
        <div class="statistics aside">
            <div>
                <h1>Single Player</h1>
                <div data-bind="foreach: urls.playSinglePlayer">
                    <p><a id="play-anon-single" class="" href="javascript:void(0)" data-bind="attr: { onClick: url }, html: content"></a></p>
                </div>
                <div data-bind="if: isTwoPlayer">
                <h1>Two Player</h1>
                <div data-bind="ifnot: isAuthenticated">
                    <span id="statistics">Login or create a new member to play a game with another member.</span>
                </div>
                <div data-bind="foreach: urls.playMultiPlayer">
                    <p><a id="play-anon-single" class="" href="javascript:void(0)" data-bind="attr: { onClick: url }, html: content"></a></p>
                 </div>
                 </div>
            </div>
        </div>
        <div class="statistics aside">
            <div>
                <h1>
                    Messages</h1>
                <div data-bind="foreach: messages">
                    <p data-bind="text: message"></p>
                </div>
            </div>
        </div>
    </div>
</div>
